<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px;">
            <el-button type="success" size="mini" @click="openWindow('examChild')" icon="el-icon-plus">新增试卷</el-button>
            <el-button type="success" size="mini" @click="openSuperviseWindow" icon="el-icon-search">成绩查询</el-button>
        </div>
        <div style="margin: 5px;padding: 5px;">
            <el-table :data="examList" v-loading="loading" size="mini" border stripe height="600"  highlight-current-row @current-change="handleCurrentChange" :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column prop="classesName" label="班级" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="examTime" label="考试时间" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{$YEAR_MONTH_DAY(scope.row.examTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="examTimeLength" label="时长" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.examTimeLength}}分钟
                    </template>
                </el-table-column>
                <el-table-column prop="examName" label="名称" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="examType" label="类型" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag effect="plain"  style="width: 100%;height: 100%;" :type="scope.row.examType == '1' ? 'success': (scope.row.examType == '2' ? 'warning':'danger')">
                            {{scope.row.examType == '1' ? '日测':(scope.row.examType == '2' ? '周测' : '月考')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="examType" label="题型" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{handleQuestionTypes(scope.row.questionTypeIds)}}
                    </template>
                </el-table-column>
                <el-table-column prop="examStatus" label="状态" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag style="width: 100%;height: 100%;"
                             :type="scope.row.examStatus == '1' ?
                                    'info':(scope.row.examStatus == '2' ?
                                    'primary':(scope.row.examStatus == '3' ?
                                    'warning' : (scope.row.examStatus == '4' ?
                                    'danger' : (scope.row.examStatus == '5' ? 'success' : 'info' )))) ">

                            {{scope.row.examStatus == '1' ?
                            '未开始':(scope.row.examStatus == '2' ?
                            '进行中':(scope.row.examStatus == '3' ?
                            '有批阅，无补考' : (scope.row.examStatus == '4' ?
                            '有批阅，且补考' : (scope.row.examStatus == '5' ?
                            '无批阅，且补考' : '结束' )))) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="examPattern" label="出题模式" align="center">
                    <template slot-scope="scope">
                        <font :style="{'color':  scope.row.examPattern == '1' ? 'black' : 'red'}">
                            <strong>
                                {{scope.row.examPattern == '1' ? '手动' : '自动'}}
                            </strong>
                        </font>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="800px">
                    <template slot-scope="scope">

                        <el-button type="info" size="mini" @click="startExam(scope.row)"  :disabled="scope.row.examStatus != '1'" v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-check">开始考试</el-button>
                        <el-button type="success" size="mini" @click="monitorExam(scope.row)"  :disabled="!scope.row.examStatus.includes('2')" icon="el-icon-message-solid">监控答题</el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="markingWriter(scope.row)"
                            :disabled="!scope.row.questionTypeIds.includes('3') ||scope.row.askOver == '2'"
                            icon="el-icon-edit-outline">批阅问答</el-button>
                        <el-button
                                type="warning"
                                size="mini"
                                @click="correctUpperExam(scope.row)"
                                :disabled="!scope.row.questionTypeIds.includes('4') ||scope.row.upperOver == '2'"
                                icon="el-icon-data-line">批阅上机</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                :disabled="scope.row.examStatus == '1' || scope.row.examStatus == '6'"
                                @click="overExam(scope.row)"
                                icon="el-icon-sunny"
                                v-loading.fullscreen.lock="fullscreenLoading">结束考试</el-button>

                        <el-button type="info" plain @click="analysisExam(scope.row)" :disabled="scope.row.examStatus != '6'"  size="mini" icon="el-icon-document-copy">成绩分析</el-button>
                        <el-button type="success" plain @click="explainExam(scope.row)"  :disabled="scope.row.examStatus != '6'"   size="mini" icon="el-icon-c-scale-to-original">试卷讲解</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>





        <el-dialog :visible.sync="value" :show-close="false" title="无法结束考试，请按照下方进行相关操作" center>
            <el-card shadow="never" style="border: 0px;">
                <template v-if="notOverData && notOverData.scoreIsZeroStudentList.length > 0"  slot="header">未参考人员名单</template>
                <el-table  v-if="notOverData && notOverData.scoreIsZeroStudentList.length > 0" :data="notOverData.scoreIsZeroStudentList" size="mini" :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}">
                    <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                    <el-table-column prop="nickName" label="学生姓名" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" plain icon="el-icon-edit" @click="handleNotConsult(scope.row)">无需参考</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-card shadow="never" style="border: 0px;">
                <template v-if="notOverData && notOverData.askResultIsOneStudentList.length > 0"  slot="header">问答题未批阅人员名单</template>
                <el-table  v-if="notOverData && notOverData.askResultIsOneStudentList.length > 0" :data="notOverData.askResultIsOneStudentList" size="mini" :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}">
                    <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                    <el-table-column prop="nickName" label="学生姓名" align="center"></el-table-column>
                </el-table>
            </el-card>

            <el-card shadow="never" style="border: 0px;">
                <template v-if="notOverData && notOverData.upperResultIsOneStudentList.length > 0"  slot="header">上机题未批阅人员名单</template>
                <el-table  v-if="notOverData && notOverData.upperResultIsOneStudentList.length > 0" :data="notOverData.upperResultIsOneStudentList" size="mini" :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}">
                    <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                    <el-table-column prop="nickName" label="学生姓名" align="center"></el-table-column>
                </el-table>
            </el-card>
        </el-dialog>



        <exam-child ref="examChild"></exam-child>
        <student-exam-monitor ref="studentExamMonitor"></student-exam-monitor>
        <student-exam-correct ref="studentExamCorrect"></student-exam-correct>
        <student-exam-upper ref="studentExamUpper"></student-exam-upper>
        <student-exam-analysis ref="studentExamAnalysis"></student-exam-analysis>
        <student-exam-explain ref="studentExamExplain"></student-exam-explain>
        <student-exam-supervise ref="studentExamSupervise"></student-exam-supervise>
    </div>
</template>

<script>

    import { getExamList,findById,startExam,overExam,handleNotPerson,notConsult } from "@/api/academic/exam";

    export default {
        name: "exam-index",
        components:{
            ExamChild:()=>import("@/views/academic/exam-child.vue"),
            StudentExamMonitor:()=>import("@/views/student/student-exam-monitor.vue"),
            StudentExamCorrect:()=>import("@/views/student/student-exam-correct.vue"),
            StudentExamUpper:()=>import("@/views/student/student-exam-upper.vue"),
            StudentExamAnalysis:()=>import("@/views/student/student-exam-analysis.vue"),
            StudentExamExplain:()=>import("@/views/student/student-exam-explain.vue"),
            StudentExamSupervise:()=>import("@/views/student/student-exam-supervise.vue")
        },
        data(){
            return {
                value:false,
                examList:[],
                loading:true,
                params:{page:1,size:10,total:0},
                fullscreenLoading:false,
                currentExam: null,
                notOverData:null,//不能执行结束考试的名单   未参考，问答题未批阅 上机题未批阅
            }
        },
        methods:{
            handleSizeChange(val){
                this.params.size = val;
                this.getExamList(this.params);
            },
            handlePageChange(val){
                this.params.page = val;
                this.getExamList(this.params);
            },
            getExamList(data){
                getExamList(data).then(res=>{
                    if(res.data.success){
                        this.examList = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            },
            openWindow(name){ //新增考试
                this.$refs[name].exam= {};
                this.$refs[name].value = true;
            },
            handleCurrentChange(val){ //选中行
                this.currentRow = val;
            },
            handleQuestionTypes(questionTypes){
                let arr = [];
                if(questionTypes.includes("1")){
                    arr.push("单选");
                }
                if(questionTypes.includes("2")){
                    arr.push("多选");
                }
                if(questionTypes.includes("3")){
                    arr.push("问答");
                }
                if(questionTypes.includes("4")){
                    arr.push("上机");
                }
                return arr.join(",");
            },
            startExam(data){
                this.fullscreenLoading = true;
                //当前行记录中有examStatus的值,直接判断就好,为什么还要查一次?
                //因为有可能后台定时器到时间会自动修改值,现在的行记录是旧值,无法获得examStatus的实际值,所有需要查询一次
                findById({id:data.id}).then(res=>{
                    if(!res.data.success){
                        this.$message.error("非法操作,可能该试卷已经开始");
                        this.fullscreenLoading = false;
                        this.getExamList(this.params);
                        return false;
                    }else{
                        this.$confirm("确定要开启该试卷吗? 如果开启,学生则可以考试","友情提示",{type:'warning'}).then(()=>{
                            startExam(data).then(res=>{
                                if(res.data.success){
                                    this.$message.success("开启考试成功," + this.currentRow.examTimeLength + "分钟后结束考试");
                                }else{
                                    this.$message.error(res.data.message);
                                }
                                this.fullscreenLoading = false;
                                this.getExamList(this.params);
                            }).catch(e=>{
                                this.$message.error("开始失败,失败原因:" + e);
                                this.fullscreenLoading = false;
                            })
                        });
                    }
                });
            },
            monitorExam(data){ //监控答题
                if(data.examStatus != '2'){
                    this.$message.error("只能查看进行中的试卷");
                    return false;
                }

                this.$refs['studentExamMonitor'].parentData = data;
                this.$refs['studentExamMonitor'].value = true;
            },
            markingWriter(data){ //批阅试卷

                if(!data.questionTypeIds.includes("3")){
                    this.$message.error("不包含问答题");
                    return false;
                }

                if(!data.examStatus.includes("3") && !data.examStatus.includes("4")){
                    this.$message.error("非批阅状态无法使用");
                    return false;
                }

                this.$refs['studentExamCorrect'].parentData = data;
                this.$refs['studentExamCorrect'].value = true;
            },
            correctUpperExam(data){//批阅上机

                if(!data.questionTypeIds.includes("4")){
                    this.$message.error("不包含上机题");
                    return false;
                }

                if(!data.examStatus.includes("3") && !data.examStatus.includes("4")){
                    this.$message.error("非批阅状态无法使用");
                    return false;
                }

                this.$refs['studentExamUpper'].parentData = data;
                this.$refs['studentExamUpper'].value = true;

            },
            overExam(data){//结束考试
                this.$confirm("确定要结束考试吗？","友情提示",{type:'warning'}).then(()=>{
                    this.fullscreenLoading = true;
                    this.currentExam = data;
                    overExam(data).then(res=>{

                        if(res.data.success){
                            this.$message({
                                type:res.data.success?'success':'error',
                                message:res.data.message,
                                center:true
                            });
                            this.getExamList(this.params);
                        }else{
                            this.notOverData = res.data.data;
                            this.value = true;
                        }
                        this.fullscreenLoading = false;

                    })
                })
            },
            handleNotPerson(data){ //获取未执行名单
                handleNotPerson(data).then(res=>{
                    this.notOverData = res.data.data;
                })
            },
            handleNotConsult(data){//无需参考
                this.$confirm("确定要这样做么？","友情提示",{type:'warning'}).then(res=>{
                    let examId = this.currentExam.id;
                    let studentId = data.id;
                    this.fullscreenLoading = true;
                    notConsult({examId:examId,studentId:studentId}).then(res=>{
                        this.$message({
                            type:res.data.success?'success':'error',
                            message:res.data.message,
                            center:true
                        });
                        this.fullscreenLoading = false;
                        this.handleNotPerson(this.currentExam);

                        if(this.notOverData && this.notOverData.length == 0){
                            this.value = false;
                        }

                    })
                })
            },
            analysisExam(data){ //成绩分析
                if(data.examStatus != '6'){
                    this.$message.error("目前阶段无法查看");
                    return false;
                }

                this.$refs['studentExamAnalysis'].parentData = data;
                this.$refs['studentExamAnalysis'].value = true;
            },
            explainExam(data){ //试卷讲解
                if(data.examStatus != '6'){
                    this.$message.error("目前阶段无法查看");
                    return false;
                }

                this.$refs['studentExamExplain'].parentData = data;
                this.$refs['studentExamExplain'].value = true;
            },
            openSuperviseWindow(){
                this.$refs['studentExamSupervise'].value = true;
            }
        },
        created(){
            this.getExamList(this.params);
        }
    }
</script>

<style scoped>

</style>